<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'
const charts = ref()
onMounted(()=> {
  const myCharts = echarts.init(charts.value)
  myCharts.setOption({
    title:{
      text:'散点图',
      left:'10%',
      textStyle:{
        color:'white'
      }
    },
    xAxis:{
      type:'category',
      show:true,
    },
    yAxis:{
      show:false,
    },
    series:{
      type:'scatter',
      data:[33,88,21,188,234,100,23,120,45,98],
      //标记图形的设置
      symbol:'diamond',
      symbolSize:16,
    //   图文标签
      label:{
        show:true,
        position:'top',
        color:'skyblue'
      },
      itemStyle:{
        color:{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'green' // 0% 处的颜色
          }, {
            offset: 1, color: 'yellow' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
      }
    },
    grid:{
      left:20,
      top:20,
      right:0,
      bottom:20
    },
  })
})
</script>
<template>
  <div class="year-container">
    <div class="year-tit">
      <p class="tit">年度游客量对比</p>
      <p class="bg"></p>
    </div>
    <div class="charts" ref="charts">
    </div>
  </div>
</template>

<style scoped lang="scss">
.year-container{
  background: url("../../images/dataScreen-main-lb.png") no-repeat;
  background-size: cover;
  margin: 10px 0;
  .year-tit{
    margin-left: 20px;
    .tit{
      color: white;
      font-size: 20px;
      margin:10px 0;
    }
    .bg{
      width: 68px;
      height: 7px;
      background: url("../../images/dataScreen-title.png");
    }
  }
  .charts{
    height: calc(100% - 30px);
  }
}
</style>